<template>
  <a-modal
    title="角色操作"
    :mask-closable="false"
    :centered="true"
    v-model="visible"
    :okButtonProps="{ props: { disabled: isDisabled } }"
    @ok="handleSubmit">
    <a-form :form="form" :label-col="labelCol" :wrapper-col="wrapperCol" @submit="handleSubmit">
      <a-form-item style="display:none" >
        <a-input v-decorator="['roleId']"/>
      </a-form-item>
      <a-form-item label="角色名称">
        <a-input
          autocomplete="off"
          v-decorator="['roleName', { rules: [{ required: true, message: '请输入角色名称!' }] }]"
        />
      </a-form-item>
      <a-form-item label="角色描述">
        <a-textarea
          autocomplete="off"
          v-decorator="['describe', { rules: [{ required: true, message: '请输入角色描述!' }] }]"
          :rows="3" />
      </a-form-item>
      <a-form-item label="菜单权限">
        <a-tree
          checkable
          :showLine="true"
          :replaceFields="{children:'children', title:'menuName',key:'id'}"
          v-model="checkedKeys"
          @check="onCheck"
          :selectedKeys="selectedKeys"
          :treeData="treeData"
        />
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script>
  import {axios} from '../../utils/request'
  import pick from 'lodash.pick'
  export default {
    name: 'RoleModal',
    created() {
          this.getMenuTreeData()
      },
    data(){
      return {
        visible: false,
        isDisabled: false,
        labelCol: { span: 6 },
        wrapperCol: { span: 10 },
        form: this.$form.createForm(this),
        /*树*/
        autoExpandParent: true,
        checkedKeys: [],
        selectedKeys: [],
        halfCheckedKeys: [],
        treeData:[],
        pidSet:[]
      }
    },
    methods:{
      add () {
        this.visible = true
        this.isDisabled = false
        this.checkedKeys = []
        this.form.resetFields()
      },
      edit(record){
        this.visible = true
        this.isDisabled = false
        this.getRoleMenu(record.roleId)
        this.$nextTick(() => {
          this.form.setFieldsValue(pick(record, 'roleId', 'roleName', 'describe'))
        })
      },
      getRoleMenu(roleId){
        axios({
          url:'/role/getRoleMenuByRoleId',
          method:'get',
          params:{roleId:roleId},
        })
          .then(response=>{
                if(response.code==200){
                  const result=response.result
                  const pidSet = new Set(result.map(m => m.parentId).filter(id => id > 0))
                  this.pidSet = pidSet
                  this.checkedKeys = result.map(m => m.id).filter(id => !pidSet.has(id))
                }else{
                  this.$message.error('获取菜单权限失败！'+response.message)
                }
          })
      },
      getMenuTreeData(){
          axios.get('/menu/treeMenu').then(response=>{
               if(response.code==200){
                 this.treeData = response.result
               }else{
                 this.$message.error('获取菜单权限失败！'+response.message)
               }
          })
      },
      handleSubmit(e){
        e.preventDefault()
        this.form.validateFields((err, values) => {
          if (!err) {
            values.menuIds=this.checkedKeys.concat(this.halfCheckedKeys).join(',')
            axios.post(values.roleId>0?'/role/update':'role/add',values
             ).then(response=>{
                if(response.code==200){
                  this.isDisabled = false
                  this.$emit('ok')
                  this.visible = false
                }else{
                  this.$message.error(response.message)
                }
            })

          }else{
            this.$message.error('页面提交错误，刷新页面重新提交！')
            this.isDisabled = true
          }
        })
      },
      onCheck(checkedKeys, info) {
        this.checkedKeys = checkedKeys
        this.halfCheckedKeys = info.halfCheckedKeys
      },
    }
  }
</script>

<style scoped>

</style>